<template>
	<view class="video-preview">
        <view v-if="showCollects" class="show_collect_like">
            <image class="like" @click="likeFn(info)"
                   :src="info.like === 1 ? '../static/images/home/heart_fill.png' : '../static/images/home/heart.png'"
                   style="width: 36rpx; height: 32rpx"></image>
            <text v-if="info.likeNumber" class="likeNumber">{{ info.likeNumber }}</text>
            <image class="collection" @click="collectionFn(info)"
                   :src="info.collect === 1 ? '../static/images/start1.svg' : '../static/images/start.svg'"
                   style="width: 36rpx; height: 32rpx"></image>
            <text v-if="info.collectNumber" class="collectNumber">{{ info.collectNumber }}</text>
        </view>
        <zmm-watermark :watermark="watermark" :margin="40"></zmm-watermark>
        <video ref="videoPlayer" class="video_box" :src="videoSrc" :controls="true" :enable-progress-gesture="true"
               :show-progress-bar="true" :duration="duration" :current-time="currentTime"
               @timeupdate="onTimeUpdate"></video>
        
        <view class="knowledge_navigation" v-if="search">
            <view class="model" v-for="(item, index) in items" :key="index">
                <view class="title">
                    <view>
                        <image src="../static/images/link_page.svg"></image>
                        相关片段{{ index + 1 }}
                    </view>
                    <u-icon :name="item.ellipsis? 'arrow-right' : 'arrow-down'"
                            :color="item.ellipsis?'#000000':'#0084FF'" size="15" @click="open(item,index)"></u-icon>
                </view>
				<view class="content" @click="handleNavigation(item)" :class="item.ellipsis ? 'ellipsis' : ''">
					{{ item.text }}
                </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'preview',
		data() {
			return {
                info: {},
                showCollects: true,
                search: false,
                analysisData: {},
                activeTag: {},
                player: null,
                items: [],
                videoSrc: '',
                duration: 0,
                currentTime: 0,
                watermark: this.$store.state.user.id + this.$store.state.user.name,
                downloadUrl: ''
            }
		},
		computed: {
			workflowHeight() {
				let height = document.documentElement.clientHeight || document.body.clientWidth
				height = (height - 46) * 2
				return {
					height: height + 'rpx'
				}
			}
		},
		onLoad(options) {
            console.log(options.downloadUrl, 'options')
			this.info = JSON.parse(decodeURIComponent(options.info))
			this.downloadUrl = options.downloadUrl ? JSON.parse(decodeURIComponent(options.downloadUrl)) : ''
			// if(this.info){
			// 	this.info.like = 0
			// 	this.info.likeNumber = 0
			// 	this.info.collectNumber = 0
			// 	this.info.collect = 0
			// }
			console.log("查看参数", this.info, this.downloadUrl)
			// this.info = this.info.file_detail ? this.info.file_detail : this.info
            this.search = options.search
            this.showCollects = !options.showCollects
			if (this.info.ext) {
				this.items = this.info.ext.items
				if (this.items) {
					this.items.map(item => {
						item.ellipsis = true
					})
				}
			}


			console.log(this.info, this.items, this.search, 'dcd')
		},
		mounted() {
			this.autoPlay()
		},
		methods: {
			autoPlay() {
				let that = this;
                let url = '/file/getUrl'
                let params = {
                    id: this.info.id
                }
                if (!this.info.id) {
                    url = '/file/getUrlByUploadName'
                    params = {
                        uploadName: this.info.fileUploadName
                    }
                }
                if (!this.downloadUrl) {
                    this.$request({
                        url: url,
                        method: 'get',
                        params: params
                    }).then(({
                        data
                    }) => {

                        // console.log(data, '5555')
                        // that.player = new this.$Player({
                        // 		id: 'videoBox', //元素id
                        // 		lang: 'zh', //设置中文
                        // 		volume: 0, // 默认静音
                        // 		autoplay: false, //自动播放
                        // 		screenShot: true, // 开启截图功能
                        // 		height: 500,
                        // 		width: '100%',
                        // 		//视频地址
                        // 		url: data.downloadUrl,
                        // 		//封面图
                        // 		// poster: '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
                        // 		fluid: true, // 填满屏幕 （流式布局）
                        // 		playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
                        // 	})
                        // 	if(that.items){
                        // 		// 监听播放进度事件
                        // 		that.player.on("timeupdate", that.onTimeUpdate);
                        // 	}

                        // 动态切换视频源
                        this.videoSrc = uni.$config.baseUrl + data.downloadUrl
                    })
                } else {
                    this.videoSrc = uni.$config.baseUrl + this.downloadUrl
                }
                console.log(this.videoSrc)
                // 重置进度条
                this.currentTime = 0
                this.$refs.videoPlayer.seek(0)
                
                
                this.$request({
                    url:'/knowledgeData/addView',
                    method:'post',
                    data:{
                    id: this.info.id,
                    }
                }).then(({ data })=> {
                    this.$set(this.info, 'like', data.like)
                    this.$set(this.info, 'likeNumber', data.likeNumber)
                    this.$set(this.info, 'collectNumber', data.collectNumber)
                    this.$set(this.info, 'collect', data.collect)
                })
				// })
			},
			onTimeUpdate(e) {
				// console.log(e,'fff')
				// 更新进度条显示
				this.currentTime = e.detail.currentTime
				this.duration = e.detail.duration

				this.items.map(item => {
					if (e.detail.currentTime > item.seg_time[0] && e.detail.currentTime < item.seg_time[1]) {
						this.$set(this.activeTag, "id", item.node_id);
						this.$set(this.activeTag, "labelName", item.text);
					}
				})
            },
            // onTimeUpdate(currentTime) {
            //   // console.log("Current time:", currentTime.currentTime);
            //  this.items.map( item => {
            //     if( currentTime.currentTime > item.seg_time[0] && currentTime.currentTime < item.seg_time[1]){
            //         this.$set(this.activeTag, "id", item.node_id);
            //         this.$set(this.activeTag, "labelName", item.text);
            //     }
            //  })
            // },
            
            collectionFn(item) {
                let url = item.collect === 1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
                this.$request({
                    url: url,
                    method: 'post',
                    data: {
                        collectType: '2',
                        knowledgeFileId: item.id
                    }
                }).then(({data}) => {
                    if (item.collect === 1) {
                        this.$toast('取消收藏')
                        this.info.collect = 0
                        this.info.collectNumber--
                    } else {
                        this.$toast('已收藏')
                        this.info.collect = 1
                        this.info.collectNumber++
                    }
                    console.log('info===', this.info)
                    this.$forceUpdate()
                })
            },
            likeFn(item) {
                let url = item.like === 1 ? '/knowledgeCollect/delete    ' : '/knowledgeCollect/add'
                this.$request({
                    url: url,
                    method: 'post',
                    data: {
                        collectType: '1',
                        knowledgeFileId: item.id
                    }
                }).then(({data}) => {
                    if (item.like === 1) {
                        this.$toast('取消点赞')
                        this.info.like = 0
                        this.info.likeNumber--
                    } else {
                        this.$toast('已点赞')
                        this.info.like = 1
                        this.info.likeNumber++
                    }
                    console.log('info===', this.info)
                    this.$forceUpdate()
                })
            },
            handleNavigation(navigation) {
                console.log(navigation, '555')
                this.$set(this.activeTag, 'id', navigation.node_id)
                this.$set(this.activeTag, 'labelName', navigation.text)
                // 操作视频播放器跳到对应位置 文件解析进入到对应位置
                // this.player.seek(navigation.seg_time[0]);
                this.$refs.videoPlayer.seek(navigation.seg_time[0])
            },
            open(item, index) {
                this.items[index].ellipsis = this.items[index].ellipsis == true ? false : true
				this.$forceUpdate()
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-preview {
		width: 100%;
        padding: 30rpx;
        .video_box{
            border-radius: 8rpx;
        }

		.knowledge_navigation {
			margin-top: 20rpx;
			padding: 20rpx;
			// background: red;
			height: 69vh;
			overflow-y: scroll;

			.model {
				margin-bottom: 20rpx;
                border-radius: 16rpx;
                background: #FFFFFF;
				.title {
					display: flex;
					justify-content: space-between;
                    font-family: Source Han Sans;
                    font-size: 30rpx;
                    font-weight: normal;
                    padding: 0 32rpx;
                    min-height: 78rpx;
                    line-height: 78rpx;
                    image{
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 30rpx;
                        vertical-align: middle;
                    }
				}

				.content {
                    font-family: Source Han Sans;
                    font-size: 30rpx;
                    font-weight: normal;
                    color: #1C2126;
                    text-align: justify;
                    padding: 20rpx 26rpx 30rpx;
                    position: relative;
                    &:before{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 6rpx;
                        right: 6rpx;
                        border: 2rpx solid #EAECEF;
                    }
				}

				.ellipsis {
					display: none;
				}
			}
		}
	}

</style>